<template>
	<view class="login">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"><view class="top_view"></view></view>
		<!-- #endif -->
		<view class="topheader">
			<view class="flex row_center" style="padding-top: 60rpx;"><image src="../../static/image/login_user.png" mode="" style="width: 70px;height: 70px;"></image></view>
			<view class="text_center" style="margin-top: 40rpx;color: #fff;">登 录</view>
		</view>
		<view class="login_form">
			<u-form :model="form" ref="uForm" style="margin-top: 26rpx;">
				<u-form-item label="" left-icon="account-fill"><u-input v-model="form.username" placeholder="请输入用户名" /></u-form-item>
				<u-form-item label="" left-icon="lock-fill"><u-input v-model="form.password" type="password" placeholder="请输入密码" /></u-form-item>
			</u-form>
			<u-button type="primary" style="margin-top: 100rpx;" shape="circle" @click="dologin">登录</u-button>
			<view class="m_t_10" style="color: #333333;font-size: 24rpx;text-align: center;">
				点击"登录"即表示已同意
				<text style="color: #f54f46;">《用户协议》</text>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				username: '',
				password: ''
			}
		};
	},
	methods: {
		dologin() {
			this.$u.api
				.dologin(this.form)
				.then(res => {
					console.log(res);
					if (res.code === 200) {
						uni.setStorage({
							key: 'token',
							data: res.data.token
						});
						uni.setStorage({
							key: 'userid',
							data: res.data.id
						});
						this.$refs.uToast.show({
							title: '登录成功',
							type: 'success',
							url: '/pages/index/index'
						});
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						});
					}
				})
				.catch(err => {
					console.log(err);
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error'
					});
				});
		}
	}
};
</script>

<style lang="less">
.login {
	.topheader {
		width: 100%;
		height: 390rpx;
		background-image: url(../../static/image/login_bg.png);
		background-size: 100% 100%;
	}
	.login_form {
		width: 542rpx;
		margin: 0 auto;
	}
}
</style>
